<!-- 标准管理->佣金结算标准->新增/编辑/查看 -->
<template>
  <div class="billingCommissions">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/billingCommissions' }">佣金结算标准</el-breadcrumb-item>
      <el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      ref="typeForm"
      :rules="rules"
      :model="typeForm"
      label-width="205px"
      style="width:600px"
    >
      <div class="type-item-box">
        <p class="type-item-title">基本信息</p>
        <el-form-item label="标准名称：" prop="name">
          <el-input v-if="typeStatus !='view'" v-model.trim="typeForm.name" autocomplete="off"></el-input>
          <span v-else>{{typeForm.name}}</span>
        </el-form-item>
      </div>
      <div class="type-item-box">
        <p class="type-item-title">项目标准</p>
        <el-form-item label="业务线：" prop="lineBusiness">
          <el-select
            v-if="typeStatus !='view'"
            v-model.trim="typeForm.lineBusiness"
            :disabled="inputDisabled"
            placeholder="请选择业务线"
          >
            <el-option
              v-for="({label,value},index) in businessLineOptions"
              :key="index"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
          <span v-else>{{typeForm.lineBusiness | lineFilter}}</span>
        </el-form-item>
        <el-form-item label="项目类型：" prop="lineType">
          <template v-if="typeStatus !='view'">
            <el-radio v-model="typeForm.lineType" :disabled="inputDisabled" :label="1">内部项目</el-radio>
            <el-radio v-model="typeForm.lineType" :disabled="inputDisabled" :label="0">外部项目</el-radio>
          </template>
          <span v-else>{{typeForm.lineType|typeFilter}}</span>
        </el-form-item>
        <el-form-item label="合作模式：" prop="lineCollaborat">
          <el-select
            v-if="typeStatus !='view'"
            v-model.trim="typeForm.lineCollaborat"
            :disabled="inputDisabled"
            placeholder="请选择则合作模式"
          >
            <el-option
              v-for="({label,value},index) in modalOptions"
              :key="index"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
          <span v-else>{{typeForm.lineCollaborat|modalFilter}}</span>
        </el-form-item>
        <el-form-item label="内场or外场代理：" prop="orinternal">
          <template v-if="typeStatus !='view'">
            <el-radio v-model="typeForm.orinternal" :disabled="inputDisabled" :label="1">内场</el-radio>
            <el-radio v-model="typeForm.orinternal" :disabled="inputDisabled" :label="0">外场</el-radio>
          </template>
          <span v-else>{{typeForm.orinternal|hasFilter}}</span>
        </el-form-item>
      </div>
      <div class="type-item-box">
        <p class="type-item-title">佣金标准</p>
        <el-form-item label="分佣标准：" class="posterurl">
          <div v-if="typeStatus !='view'" style="display:flex">
            <el-form-item prop="inCommissionEqual">
              <el-select
                v-model.trim="typeForm.inCommissionEqual"
                placeholder="请选择"
                style="margin-right:20px"
              >
                <el-option
                  v-for="({label,value},index) in sizeOptions"
                  :key="index"
                  :label="label"
                  :value="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="inCommission">
              <el-input v-model.trim="typeForm.inCommission" autocomplete="off"></el-input>
            </el-form-item>
            <div class="unit-box">%</div>
          </div>
          <span v-else>{{typeForm.inCommissionEqual|sizefilter }} {{typeForm.inCommission}}%</span>
        </el-form-item>
        <el-form-item label="是否有返还款：" prop="inCommissionReturn">
          <template v-if="typeStatus !='view'">
            <el-radio v-model="typeForm.inCommissionReturn" :label="1">是</el-radio>
            <el-radio v-model="typeForm.inCommissionReturn" @change="clearError" :label="0">否</el-radio>
          </template>
          <span v-else>{{typeForm.inCommissionReturn?"是":"否"}}</span>
        </el-form-item>
        <el-form-item label="开发商返还：" class="posterurl">
          <div v-if="typeStatus !='view'" style="display:flex">
            <el-form-item prop="inCommissionCoinEqual">
              <el-select
                v-model.trim="typeForm.inCommissionCoinEqual"
                :disabled="!typeForm.inCommissionReturn"
                placeholder="请选择"
                style="margin-right:20px"
              >
                <el-option
                  v-for="({label,value},index) in sizeOptions"
                  :key="index"
                  :label="label"
                  :value="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="inCommissionCoin">
              <el-input
                v-model.trim="typeForm.inCommissionCoin"
                :disabled="!typeForm.inCommissionReturn"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="unit-box">%</div>
          </div>
          <span
            v-else-if="typeForm.inCommissionCoin"
          >{{typeForm.inCommissionCoinEqual|sizefilter }} {{typeForm.inCommissionCoin}}%</span>
          <span v-else>无</span>
        </el-form-item>
        <el-form-item label="标准说明：">
          <div
            class="comm-tip"
          >设置佣金套餐时，套餐设置要符合佣金标准，否则走特殊审批；计算规则：根据项目均价和户型面积区间，测算出项目楼盘的房屋总价范围区间；分佣比例= 渠道分佣 / 好生活总收入；返还款比例= 开发商返还款 / 好生活总收入；根据房屋总价范围、分佣比例公式、返还款比例公式算出分佣比例最大值和返还款比例最大值；如果最大值超标准，走超标审批流程；</div>
        </el-form-item>
      </div>
      <div style="padding:10px 0">
        <el-form-item label="超出标准允许发起审批流程：" prop="orexceed">
          <template v-if="typeStatus !='view'">
            <el-radio v-model="typeForm.orexceed" :label="1">是</el-radio>
            <el-radio v-model="typeForm.orexceed" :label="0">否</el-radio>
          </template>
          <span v-else>{{typeForm.orexceed?"是":"否"}}</span>
        </el-form-item>
      </div>
    </el-form>

    <p v-if="typeStatus !='view'" style="text-align:center">
      <el-button type="primary" @click="loadApproval">发起审批</el-button>
      <el-button type="primary" v-if="typeStatus =='add'" @click="addSave(0)">保存</el-button>
      <el-button type="primary" v-if="typeStatus =='edit'" @click="editSave(0)">保存</el-button>
      <el-button type="primary" @click="back">取消</el-button>
    </p>
    <!-- 审核记录 -> 详情页面显示 -->
    <template v-else>
      <audit-table :tableData="auditData"></audit-table>
      <p style="text-align:center">
        <el-button type="primary" @click="back">关闭</el-button>
      </p>
    </template>
  </div>
</template>

<script>
import api from "@/api/apiPath";
import auditTable from "../common/auditTable"; //审核记录表
export default {
  components: {
    "audit-table": auditTable
  },
  computed: {
    inputDisabled() {
      return this.typeForm.examineStatus == 2;
    },
    inCommissionReturn() {
      return this.typeForm.inCommissionReturn;
    }
  },
  watch: {
    inCommissionReturn(val) {
      if (!val) {
        //this.$set(this.typeForm,'inPadRanking',null)
        this.$set(this.typeForm, "inCommissionCoin", null);
      }
    }
  },
  data() {
    return {
      businessLineOptions: [
        { label: "新房", value: 0 },
        { label: "交叉业务", value: 1 }
      ],
      sizeOptions: [
        { label: "=", value: 0 },
        { label: "≠", value: 1 },
        { label: ">", value: 2 },
        { label: "≥", value: 3 },
        { label: "<", value: 4 },
        { label: "≤", value: 5 }
      ],
      modalOptions: [
        { label: "包销模式", value: 0 },
        { label: "分销模式", value: 1 },
        { label: "合伙人模式", value: 2 },
        { label: "加盟模式", value: 3 },
        { label: "保证金模式", value: 4 }
      ],
      auditData: [],
      typeForm: {
        //lineBusiness:0,
        orexceed: 1,
        inCommissionCoinEqual: 0,
        inCommissionEqual: 0
      },
      typeStatus: "",
      pageType: "",
      typeFunction: {
        //页面状态
        add: () => {
          this.pageType = "新增";
        },
        edit: id => {
          this.pageType = "编辑";
          this.loadFromDetail(id); //加载表单信息
        },
        view: id => {
          this.pageType = "详情";
          this.loadFromDetail(id);
        }
      },
      rules: {
        //验证
        name: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value && value != 0) {
                return callback(new Error("请输入标准名称"));
              }
              if (value.length > 20) {
                return callback(new Error("标准名称长度不能大于20"));
              }
              callback();
            }
          }
        ],
        lineBusiness: [
          {
            required: true,
            message: "请选择业务线",
            trigger: ["blur", "change"]
          }
        ],
        lineType: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: ["blur", "change"]
          }
        ],
        lineCollaborat: [
          {
            required: true,
            message: "请选择合作模式",
            trigger: ["blur", "change"]
          }
        ],
        orinternal: [
          {
            required: true,
            message: "请选择内场or外场",
            trigger: ["blur", "change"]
          }
        ],
        inCommissionReturn: [
          {
            required: true,
            message: "请选择是否有返还款",
            trigger: ["blur", "change"]
          }
        ],
        payCycle: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let flatReg = /^[0-9]?[0-9]+$/;
              if (!value && value != 0) return callback();
              if (!flatReg.test(value)) {
                return callback(new Error("格式不正确"));
              }
              callback();
            }
          }
        ],

        inCommission: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let flatReg = /^\d+(\.\d{0,2})?$/;
              if (!value && value !== 0) return callback(new Error("不可为空"));
              if (!flatReg.test(value)) {
                return callback(new Error("格式不正确，只允许小数点后两位"));
              }
              if (value > 100) this.typeForm.inCommission = 100;
              callback();
            }
          }
        ],
        inCommissionCoin: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let flatReg = /^\d+(\.\d{0,2})?$/;
              if (!this.typeForm.inCommissionReturn && !value)
                return callback();
              if (!value && value !== 0) return callback(new Error("不可为空"));
              if (!flatReg.test(value)) {
                return callback(new Error("格式不正确，只允许小数点后两位"));
              }
              if (value > 100) this.typeForm.inCommissionCoin = 100;
              callback();
            }
          }
        ],

        orexceed: [
          {
            required: true,
            message: "请选择是否超出标准允许发起审批流程",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    addSave(status) {
      this.$refs.typeForm.validate(valid => {
        if (!valid) {
          return;
        }
        this.typeForm;
        let params = {
          ...this.typeForm,
          examineStatus: status
        };
        this.axios
          .post(api.addbillingl, params)
          .then(res => {
            if (res.data.code == 200) {
              let text = ["添加成功", "已发起审批"];
              this.$alert(text[status], "提示", {
                type: "success",
                confirmButtonText: "确定",
                callback: action => {
                  this.$router.go(-1);
                }
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    editSave(status) {
      this.$refs.typeForm.validate(valid => {
        if (!valid) {
          return;
        }
        let params = {
          ...this.typeForm,
          examineStatus: status
        };
        this.axios
          .post(api.editbillingl, params)
          .then(res => {
            if (res.data.code == 200) {
              let text = ["编辑成功", "已发起审批"];
              this.$alert(text[status], "提示", {
                type: "success",
                confirmButtonText: "确定",
                callback: action => {
                  this.$router.go(-1);
                }
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    back() {
      this.$router.go(-1);
    },
    //加载当前页面表单详情
    loadFromDetail(id) {
      this.axios.post(`${api.billinglDetail}`, { id: id }).then(res => {
        if (res.data.code == 200) {
          this.typeForm = res.data.data.commission;
          this.auditData = res.data.data.commissionLogInfo;
        }
      });
    },
    //清除验证
    clearError(value) {
      this.$refs["typeForm"].clearValidate("inCommissionCoin");
      this.typeForm.inCommissionReturn = value;
    },
    //发起审批
    loadApproval() {
      if (this.typeStatus == "add") this.addSave(1);
      if (this.typeStatus == "edit") this.editSave(1);
    }
  },
  created() {
    let { pageType, insideId } = this.$route.query;
    //更改页面状态（新增/编辑/查看）
    this.typeStatus = pageType;
    this.insideId = insideId;
    //执行该状态init()
    this.typeFunction[pageType](insideId);
  },
  destroyed() {},
  filters: {
    sizefilter(sizeCode) {
      return ["=", "≠", ">", "≥", "<", "≤"][sizeCode];
    },
    typeFilter(type) {
      return ["外部项目", "内部项目"][type];
    },
    hasFilter(code) {
      return ["外场", "内场"][code];
    },
    lineFilter(code) {
      return ["新房", "交叉业务"][code];
    },
    modalFilter(code) {
      return ["包销模式", "分销模式", "合伙人模式", "加盟模式", "保证金模式"][
        code
      ];
    }
  }
};
</script>

<style lang="stylus" >
.billingCommissions {
  p {
    margin: 0;
    padding: 20px 0;
  }

  .comm-tip {
    padding: 5px 0;
    line-height: 30px;
  }

  .type-item-title {
    font-size: 18px;
    color: #303133;
    font-weight: 700;
  }

  .back-btn {
    padding: 30px 0;
    text-align: center;
  }

  .type-item-box {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }

  .unit-box {
    min-width: 40px;
    text-align: right;
  }
}

.posterurl .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
